<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="100px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="故障级别">
            {{ formItem.failureLevelName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否解决">
            {{ formItem.solved === true ? '解决':'未解决' }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务类型">
            {{ formItem.worktypeName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参与工程师">
            {{ formItem.helperEngineerName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="故障解决情况">
            <div class="height-div">
              {{ formItem.failureSolveSituation }}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 资产列表 -->
    <div id="资产列表">
      <div class="anthor-info-head">
        <div>
          <el-row :gutter="40">
            <el-col :span="12">
              <i class="el-icon-document" agalin /><span>资产明细</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="anthor-info-body" style="margin:10px">
        <el-table
          :loading="false"
          :data="assetData"
        >
          <el-table-column v-for="column in insideAssetColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 备品备件列表 -->
    <div id="备品备件列表">
      <div class="anthor-info-head">
        <div>
          <el-row :gutter="40">
            <el-col :span="12">
              <i class="el-icon-document" agalin /><span>备品备件明细</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="anthor-info-body" style="margin:10px">
        <el-table
          :loading="false"
          :data="stockData"
        >
          <el-table-column v-for="column in insideStockColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { frontlineProcessingDetail as detail } from '@neu/dcom-ui/api/alter'

const formItem = {
  // 工作流TaskId
  taskId: '',
  // 工单号
  workNum: '',
  // 故障级别编码
  failureLevelCode: '',
  // 故障级别名称
  failureLevelName: '',
  // 是否解决
  solved: false,
  // 服务类型编码
  worktypeCode: '',
  // 服务类型名称
  worktypeName: '',
  // 资产信息
  assets: [],
  // 备品备件信息
  stocks: [],
  // 故障解决情况
  failureSolveSituation: '',
  // 参与一线工程师编码
  helperEngineerCode: '',
  // 参与一线工程师名称
  helperEngineerName: '',
  // 状态
  status: 'temporary'
}

export default {
  name: 'MalfunctionFrontlineProcessingViewForm',
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      // ----------资产------------------
      assetData: [],
      insideAssetColumns: [
        { title: '资产分类', key: 'assetTypeName' },
        { title: '资产编号', key: 'code' },
        { title: '资产名称', key: 'name' },
        { title: '资产条码', key: 'sequence' },
        { title: '规格型号', key: 'productName' }
      ],
      // ----------备品备件------------------
      stockData: [],
      insideStockColumns: [
        {
          title: '货品编号',
          key: 'storckNumber'
        }, {
          title: '备品备件分类',
          key: 'spareTypeName'
        },
        {
          title: '规格型号',
          key: 'specification'
        },
        {
          title: 'SN',
          key: 'sn'
        },
        {
          title: '存放库房',
          key: 'storehouseName'
        },
        {
          title: '单价',
          key: 'unitPrice'
        },
        {
          title: '货品来源',
          key: 'source',
          render: (h, params) => {
            let sourceDesc = ''
            if (params.row.source === 'new') {
              sourceDesc = '合同采购'
            } else if (params.row.source === 'back') {
              sourceDesc = '退库利旧'
            }
            return h('span', [
              h('el-tag', sourceDesc)
            ])
          }
        },
        {
          title: '关联合同',
          key: 'contractName'
        }
      ]
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      if (this.workOrderNum !== 'NULL') {
        detail(this.workOrderNum, this.taskId).then(response => {
          this.formItem = {
            ...response.data
          }
          // 资产、备件table赋值
          this.assetData = this.formItem.assets
          this.stockData = this.formItem.stocks
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.height-div {
    min-height: 80px;
    max-height: 100px;
}
</style>

